<ui:composition template="../template/plantilla_02.xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui"
        xmlns:c="http://java.sun.com/jsp/jstl/core">

    <section>
    <ui:define name="panelIzquierdo" >
        <ui:include src="../seguridad/menu_vertical.xhtml"></ui:include>
    </ui:define>
    
    <ui:define name="panelDerecho" >
        
        <h:form id="formulario" prependId="false" styleClass="seccionesWeb" >
            
            <div id="fb-root"></div>
            <script type="text/javascript">
             /*<![CDATA[ */

               (function(d, s, id) {
                          var js, fjs = d.getElementsByTagName(s)[0];
                          if (d.getElementById(id)) return;
                          js = d.createElement(s); js.id = id;
                          js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
                          fjs.parentNode.insertBefore(js, fjs);
                        }(document, 'script', 'facebook-jssdk'));

             /* ]]> */
             </script>
             
        
            <h:panelGroup layout="block" styleClass="encabezadoPag" >   
                
                <div style="position:relative; float:left;"> 
                    <h:graphicImage  value="#{aplicacionBean.parametro.pathImagenesDefault}/iconos/icono_infoutil.gif" alt="Información Útil - Intercap SRL Argentina"></h:graphicImage>
                </div>
                <div style=" padding-top:18px;"> 
                    <h4>Información útil</h4>
                    Visualice videos interesantes y descargue folletos y material informativo sobre nuestros productos.
                </div>
                
            </h:panelGroup>
            
            <p:tabView id="tbv" widgetVar="tabV">
                  
                  
                <p:tab id="descargas" title="Descargas">
                                      
                   <ui:repeat value="#{aplicacionBean.parametro.linkDescarga}" var="i">
                   <div style="width:180px; margin-right:10px; height:270px; float:left; position:relative;">
                                              
                       <h:outputLink value="http://www.intercap.com.ar/descargas/#{i.link}"
                                      style="float:left;" target="_blank">
                           <h:graphicImage value="#{i.pathImagenes}" width="160" height="207"/> 
                           <h2>#{i.descripcion}</h2>
                        </h:outputLink>
                   </div>
                   </ui:repeat>   
                    
                </p:tab>                 
                
                <p:tab id="banners" title="Banners para vender en Internet">
                    <ui:repeat value="#{aplicacionBean.parametro.linkDescargaVI}" var="i">
                        <div style="width:180px; margin-right:10px; height:198px; float:left; position:relative;">
                            
                            <h:outputLink value="http://www.intercap.com.ar/descargas/#{i.link}"
                                      style="float:left;" target="_blank">
                                <h:graphicImage value="#{i.pathImagenes}" width="160" height="128"/> 
                                <h2>#{i.descripcion}</h2>
                            </h:outputLink>                   
                        </div>
                   </ui:repeat>                        
                </p:tab>
                
                
                <p:tab id="videos" title="Intercap Videos"> 
                         
                   
                        <h:panelGroup id="dVideo"  layout="block" style="width:470px; position: relative; float: left;" >
                            
                            <h:panelGroup id="tituloInformacion" layout="block" styleClass="tituloInformacion" 
                                      rendered="#{not empty videosBean.itemVideo}">
                                <h1>#{videosBean.itemVideo.titulo}</h1>
                            </h:panelGroup>

                            <h:panelGroup id="linkVideo" layout="block" styleClass="tituloInformacion"
                                        rendered="#{not empty videosBean.itemVideo}" >
                              <p:media value="#{videosBean.itemVideo.link}" width="450" height="258" player="flash"/>
                            </h:panelGroup>

                            <h:panelGroup style="margin:10px 0 10px 0;" layout="block"
                                        rendered="#{not empty videosBean.itemVideo}" >
                              #{videosBean.itemVideo.descripcion}
                            </h:panelGroup>
                            
                                                        
                            <div class="fb-like"  style="margin-top: 10px; height:60px; width:550px; float:left; position:relative; clear:both; "
                                   data-href="http://intercapweb.com.ar:8080/TiendaVirtualv2.2/global/informacionUtil.jsf"
                                   data-width="550px"                                   
                                   data-layout="standard"
                                   data-action="like"
                                   data-show-faces="true"
                                   data-share="true">
                             </div>
                            

                        </h:panelGroup >
                    
                        
                        <h:panelGroup layout="block" style="width:290px; position:relative; float:left;">

                            

                            <h:panelGroup layout="block" styleClass="tituloInformacion" >
                                <h1>
                                    <h:outputText value="Videos disponibles" />
                                </h1>    
                            </h:panelGroup>

                            <p:scrollPanel id="tbVideos" style="width:300px; height:300px; float:left; position: relative;">
                            

                               
                                <ul>
                                 
                                        <ui:repeat value="#{aplicacionBean.videos}" var="v" >

                                            <li class="btnMenu3">

                                              <p:commandLink actionListener="#{videosBean.seleccionarVideo(v)}"
                                                             styleClass="tituloVideoLista"
                                                             update="@form"
                                                             process="@this"
                                                             oncomplete="PF('tabV').select(2)" >

                                                  <h:outputText value="#{v.titulo}"  />

                                              </p:commandLink>
                                          </li>
                                        </ui:repeat>
                               
                               
                                </ul>
                           
                             </p:scrollPanel>
                            
                        </h:panelGroup>

                </p:tab>

            </p:tabView>
            

        </h:form>
                        
  </ui:define>
    </section>
</ui:composition>
